<template>
  <div class="">
    <a-drawer
      v-model:visible="visible"
      :title="dialogTitle"
      :ok-loading="loading"
      :width="800"
      :footer="true"
      :hide-cancel="true"
      @cancel="dialogCancel"
      @before-ok="dialogBeforeOk"
    >
      <a-table
        :data="allowShowColumns"
        :pagination="false"
        :bordered="{ wrapper: true, cell: false }"
        :draggable="{ type: 'handle', width: 40 }"
        @change="onTableChange"
        stripe
        class="mt-3"
      >
        <template #columns>
          <a-table-column title="列名称" data-index="title" align="center">
            <template #cell="{ record }">{{ record.title }}</template>
          </a-table-column>
          <a-table-column title="宽度" data-index="width" align="center">
            <template #cell="{ record }">
              <a-input-number
                v-if="!['operations'].includes(record.dataIndex)"
                placeholder="列宽度"
                v-model="record.width"
                mode="button"
                @change="changeColumn($event, 'width', record.dataIndex)"
                style="width: 150px;"
              />
              <span v-else> / </span>
            </template>
          </a-table-column>
          <a-table-column title="隐藏" data-index="hide" align="center">
            <template #cell="{ record }">
              <a-checkbox v-if="!['operations'].includes(record.dataIndex)" v-model="record.hide" @change="changeColumn($event, 'hide', record.dataIndex)" />
              <span v-else> / </span>
            </template>
          </a-table-column>
          <a-table-column title="固定" data-index="fixed" align="center">
            <template #cell="{ record }">
              <a-space v-if="!['operations'].includes(record.dataIndex)">
                <a-radio v-model="record.fixed" value="" @change="changeColumn($event, 'fixed', record.dataIndex)">无</a-radio>
                <a-radio v-model="record.fixed" value="left" @change="changeColumn($event, 'fixed', record.dataIndex)">左</a-radio>
                <a-radio v-model="record.fixed" value="right" @change="changeColumn($event, 'fixed', record.dataIndex)">右</a-radio>
              </a-space>
              <span v-else> / </span>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-drawer>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  import useVisible from '@/hooks/visible';
  import useLoading from '@/hooks/loading';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    columns: {
      type: Array,
      default() {
        return [];
      },
    },
  });
  const emit = defineEmits(['update:columns']);

  const { visible, setVisible } = useVisible(false);
  const { loading, setLoading } = useLoading(false);
  const dialogTitle = ref();
  const allowShowColumns = ref();

  const init = async () => {
    // const allColumns = props.columns;
    const allColumns = JSON.parse(JSON.stringify(props.columns));
    allowShowColumns.value = allColumns.filter(item => {
      if (!item?.set_hide) {
        return true;
      }
      return false;
    });

    setVisible(true);
    setLoading(false);
    dialogTitle.value = '设置';
  };
  const changeColumn = (ev, type, name) => {
    // const column = props.columns.find(item => item.dataIndex === name);
  };
  const onTableChange = (data) => {
    allowShowColumns.value = data;
    // emit('update:columns', data);
  };

  const dialogCancel = () => {
    setVisible(false);
  };
  const dialogBeforeOk = (done) => {
    setLoading(true);
    emit('update:columns', allowShowColumns.value);
    done();
  };

  // 暴露方法【给父级调用】
  defineExpose({
    init,
  });
</script>

<style scoped lang="less">

</style>
